@import "../Questions.css";

:local(.picker) {
    width: 290px;
    color: var(--title-color);
    overflow: hidden;
}

:local(.heading) {
    composes: text-bold p2 border-bottom from "style";
    font-size: 14px;
}

:local(.footer) {
    composes: text-bold p2 border-top from "style";
    font-size: 14px;
}

:local(.options) {
    composes: full-height py1 scroll-y from "style";
    max-height: 300px;
}

:local(.option) {
    composes: cursor-pointer relative from "style";
}

:local(.optionContent) {
    composes: px3 py1 flex align-center text-bold from "style";
    font-size: 1em;
    color: var(--title-color);
}

:local(.optionBackground) {
    composes: spread from "style";
    opacity: 0.1;
    background-color: currentColor;
    visibility: hidden;
}

:local(.option.selected) :local(.optionContent),
:local(.option):hover :local(.optionContent) {
    color: inherit;
}

:local(.option.selected) :local(.optionBackground),
:local(.option):hover :local(.optionBackground) {
    visibility: visible;
}

:local(.name) {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-x: hidden;
}

:local(.mainIcon) {
    composes: mr1 flex-no-shrink from "style";
}

:local(.removeIcon) {
    composes: flex-align-right flex-no-shrink from "style";
    visibility: hidden;
}
:local(.option):hover :local(.removeIcon) {
    visibility: visible;
}
